import { ReactComponent as CycleIcon } from './icon.svg';
import './index.css'

export default function ShowIcon(props) {
    return (
        <div>
            <h1>如何动态展示Icons</h1>
            <h3>1. 直接当作dom节点展示</h3>
            <svg width="50" height="50" viewBox="0 0 100 100">
                <circle id="mycircle" cx="50" cy="50" r="50" fill="orange" />
            </svg>

            <h3>2. ReactComponent展示</h3>
            <CycleIcon />  <br />
            这种方式可以直接传递参数, 但是svg中对应的属性得是空: <br />
            1. 可以传递fill, stroke, style class<br />
            2. width, height, fontSize不能改变大小, 改变大小得通过transform<br />
            <CycleIcon
                fill="red"
                width="200"
                // transform='scale(2)'
                style={{
                    // transform: 'scale(2)', // 将 SVG 放大两倍 
                    fontSize: '200px',
                    // fill: 'green',
                    border: '1px solid red',
                    // fill: 'green',
                }}
            />

            <h3>3. 封装组件展示</h3>
            <CycleIcon2 fill="red" size="100" />
            <CycleIcon2 style={{ fill: 'green' }} />
            <CycleIcon2 class="cycle" />
        </div>
    )
}

const CycleIcon2 = ({ size = 50, fill, ...rest }) => {
    return (
        <svg width={size} height={size} viewBox="0 0 100 100" {...rest}>
            <circle id="mycircle" cx="50" cy="50" r="50" fill={fill} />
        </svg>
    )
}

